<template>
  <div class="content">
    <div>
      <div style="width: 100%;display: flex">
        <div style="width: 420px;height: 30px;line-height: 30px;">
          <el-row :gutter="10" style="cursor: pointer">
            <el-col :span="6" v-for="item in tabs" :key="item.name">
              <span :class="{'content-title-left':item.isShow}"
                    @click="changeItem(item)">{{ item.name }}</span>
            </el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6"></el-col>
          </el-row>
        </div>
        <div style="flex: 1"></div>
        <div style="width: 200px;height: 30px;line-height: 30px;text-align: center;">
          <Dropdown />
        </div>
      </div>
    </div>
    <hr class="hr">
    <div>
      <component :is="current.comName"></component>
    </div>
  </div>
</template>

<script lang='ts' setup>
// 导入路由组件
import courseNews from '@/views/page/tearchertack/mycourse/details/courseNews/Index.vue';
import resources from '@/views/page/tearchertack/mycourse/details/resources/Index.vue';
import courseteachingclassmanage from '@/views/page/tearchertack/mycourse/details/teachingmanage/Index.vue';
// import Dropdown from '@/views/page/myCourse/components/Dropdown.vue';
import {
  ref, markRaw, reactive, getCurrentInstance,
} from 'vue';

const { proxy } = getCurrentInstance();

// 定义类型
type Com = {
  name: string
  comName: any
  isShow: boolean
}
// 导航栏
const tabs = reactive([
  {
    name: '课程详情',
    comName: markRaw(courseNews),
    isShow: true,
  },
  {
    name: '课程资源',
    comName: markRaw(resources),
    isShow: false,
  },
  {
    name: '班级管理',
    comName: markRaw(courseteachingclassmanage),
    isShow: false,
  },
]);
// 默认选中
const current = ref({
  comName: tabs[0].comName,
});

// 导航栏切换点击事件
const changeItem = (item: Com) => {
  current.value.comName = item.comName;
  tabs.forEach((value: any) => {
    // eslint-disable-next-line no-param-reassign
    value.isShow = item.name === value.name;
  });
};
</script>

<style scoped>
.grid-content {
  border-radius: 4px;
}

/*去掉tabs底部的下划线*/
:deep(.el-tabs__nav-wrap::after) {
  position: static !important;
}

/deep/ .el-dropdown {
  font-size: 14px;
  color: #001;
  margin-top: 5px;
  font-weight: 400;
}

.hr {
  width: 100%;
  size: 3px;
  color: #D3D3D3;
}

.content-title-left {
  border-bottom: 3px #3B82F6 solid;
}
</style>
